const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  // production
  mode: "development",
  // Js文件打包入口
  entry: {
    // "main": "./src/main.js",
    "chat": ["./src/chat/index.js"],
    // "chat": ["./src/chat/index.js", "./src/main.js"],
    // "sub": ["./src/sub/index.js", "./src/main.js"],
  },
  // Js文件打包出口
  output: {
    // 可以理解为baseUrl
    // publicPath: "http://jinx.com/",
    path: path.join(__dirname, "dist"),
    // 可以写一个固定的参数，也可以使用[name].js自动匹配
    filename: "js/[name].bundle.js",
    chunkFilename: '[name].bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,  // 匹配所有 .js 文件
        exclude: /node_modules/,  // 排除 node_modules 目录
        // use: {
        //   loader: 'babel-loader',  // 使用 babel-loader 处理 JavaScript 文件
        //   options: {
        //     presets: ['@babel/preset-env'],
        //   },
        // },
      },
      {
        test: /\.css$/,  // 匹配所有 .css 文件
        use: ['style-loader', 'css-loader'],  // 使用多个加载器处理 CSS 文件
      },
      // {
      //   test: /\.(png|jpg|gif)$/,  // 匹配图片文件
      //   use: [
      //     {
      //       loader: 'file-loader',  // 使用 file-loader 处理图片文件
      //       options: {
      //         name: '[path][name].[ext]',  // 输出文件名格式
      //       },
      //     },
      //   ],
      // },
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'chat', 'index.html'),
      filename: 'chat.html',
      chunks: ['chat']
      // template: path.join(__dirname, "index.html"),
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 8080,
    open: {
      target: [
        "chat.html"
      ]
    },
    hot: true
  }
};
/**
 * HtmlWebpackPlugin中的inject注释
 * 'true':自动注入到模板中（这是默认值），根据默认逻辑将 <script> 标签放在 <body> 标签的末尾。
 * 'false': 不自动注入打包的资源（JS、CSS等），需要手动在模板文件中插入。
 * 'head': 将 <script> 标签注入到 <head> 标签中
 * 'body': 将 <script> 标签注入到 <body> 标签的末尾。这个配置确保 JS 文件在 HTML 内容加载完
 * 之后执行，防止出现页面加载时未找到 DOM 元素的问题。
 * 
 */